iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 2
0
自我挑戰組

打造專案管理 iOS App 系列 第 2

不經意的美麗 Sketch 製作UI草圖

  • 分享至 

  • xImage
  •  

不經意的美麗 Sketch 製作UI草圖

對於鐵人賽的開始,我們還有一些技能尚未補足:

  1. git 協作功能
  2. UI/UX
  3. 網路層
    因此我們決定讓成員各認領一項,並實踐,然後分享。

    我,Alvin;認領了繪製草稿。

Sketch,草圖

sketch 在所有的平台都有很好的支援,再加上強大的擴充功能。因此sketch常常是UI設計的首選。

由於Alvin是第一次使用這個軟體,因此會將製作的過程與學習記錄下來。

佈置開發環境

由於Alvin要開發的是iOS的軟體,在開發之前,必須先佈置適合開發的環境。

Runner

Runner,提供了有如Soptlight的快捷功能,可以在開發時,快速的搜尋資源。

為了設計更加方便,我們必須安裝Runner

載點:https://sketchrunner.com/

iOS Design Kit

iOS Design Kit 提供了 iOS 的UI元件,以及相當多的設計元件。

載點:https://iosdesignkit.io/ios-13-gui/

確認元件都有安裝到sketch


確定pluging裡面有Runner


若以上配置都已完成,製作環境就備妥了。

開始製作藍圖

製作藍圖前,先決定好想要使用的色卡。

可以使用color hunter找喜歡的色卡。
網址:https://colorhunt.co/
我使用了這個較冷門的色卡:

因為這個色卡,在tableView上的顯示,有簡潔的優勢。

1.底部塗層

利用最簡單的兩個圓,配合色卡製作簡單的基底塗層。

insert -> Shape -> Oval
拉出兩個圓。
上色!!

恩... 是不是看起來很單調?
因為這是最底層的塗層,越單調反而會讓使用者能將焦點放在該注意的元件。
接下來我們將底層做一些變化。

Blur

新增將Blur屬性,將數值拉到10。

將每個圓都新增Blur吧,我們會看到以下效果:

有了底部塗層,我們終於可以開始製作UI了。

UI製作

來看看昨天討論的畫面。

由於圖是用鉛筆畫的,有點不清楚,不過沒關係。
畫面總共有9個:

我們就直接依著草圖的需求,將元件一個一個補上去吧:

以上是我今天完成的草稿。


上一篇
啟程,準備是第一道難關
下一篇
Git難,難於上青天
系列文
打造專案管理 iOS App 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言